<template>
<div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="dialogFormVisible = true" icon="el-icon-plus" v-if="_SHOWBTN(showBetCode)">新建</el-button>
    <el-dialog title="新建友情链接" :visible.sync="dialogFormVisible" width="530px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--输入框-->
            <el-form-item label=" 链接名称：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入链接名称"></el-input>
            </el-form-item>
            <!--本地图片选择-->
            <div class="pic-box">
                <h1 class="h1-1">选择图片：</h1>
                <Upload :ruleForm.sync="ruleForm" ref="upload"></Upload>
            </div>
            <!--图片提示文字及边框-->
            <div class="flex-box">
                <div class="pic-Tips">
                    <h1>1.请上传PNG、JPG或者JPEG图片，大小不超过10MB; ;</h1>
                    <h1>2.图片尺寸约为180*52；</h1>
                </div>
            </div>
            <!--输入框-->
            <el-form-item label="  链接地址：" prop="url">
                <el-input v-model="ruleForm.url" placeholder="请输入链接地址"></el-input>
            </el-form-item>
            <!--结束-->

            <el-form-item>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="BuildNew('ruleForm')">确 定</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
    components: {
        Upload,
    },
    data() {
        return {
            //文本框
            textarea200: "",
            // 控制弹窗开关
            dialogFormVisible: false,
            ruleForm: {
                name: "",
                url: "",
            },
            rules: {
                name: [{
                        required: true,
                        message: "请输入链接名称",
                        trigger: "blur",
                    },
                    {
                        message: "请上传图片",
                        trigger: "blur",
                    },
                ],
                url: [{
                        required: true,
                        message: "请输入连接地址",
                        trigger: "blur",
                    },
                    {
                        message: "请输入连接地址",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    props: ["getLinkList", "showBetCode"],
    methods: {
        //新建按钮点击事件确认
        BuildNew(formName) {
            //   this.dialogFormVisible = false;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.Api.getLinkBuildNew({
                        name: this.ruleForm.name,
                        picUrl: this.ruleForm.picUrl,
                        url: this.ruleForm.url,
                    }).then((res) => {
                        console.log(res, "ssssssss")
                        if (res.code === "0") {
                            console.log(res, 11111)
                            this.getLinkList()
                            this.dialogFormVisible = false;
                            this.ruleForm = {}
                            this.$refs.upload.$refs.uploadFile.clearFiles()
                        }
                    });
                } else {
                    // console.log("error submit!!");
                    return false;
                }
            });
        },
    },
    // watch: {
    //   ruleForm: {
    //     handler(n) {
    //       console.log(n, "ruleForm");
    //     },
    //     deep: true,
    //   },
    // },
};
</script>

<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
    color: white;
}

/deep/.el-dialog__wrapper {
    z-index: 2091 !important;

    .el-dialog {
        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            border: 1px solid rgba(230, 233, 237, 1);
            padding: 11px 20px 11px 24px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
            }

            .el-dialog__headerbtn {
                top: 15px;
            }
        }

        .el-dialog__body {
            padding: 30px 43px 0 42px;

            .el-form {
                .el-form-item {
                    margin: 0 0 16px 0;

                    .el-form-item__label {
                        width: 85px !important;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        padding: 0;
                    }

                    .el-form-item__content {
                        margin-left: 85px !important;

                        .el-input__inner {
                            width: 260px;
                            height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(221, 221, 221, 1);
                            padding-left: 12px;
                        }
                    }
                }

                .pic-box {
                    display: flex;
                    padding-bottom: 10px;

                    .h1-1 {
                        width: 85px;
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: right;
                    }

                    .h1-1::before {
                        content: "* ";
                        color: #ff0000;
                    }
                }

                .flex-box {
                    display: flex;
                    justify-content: flex-end;

                    .pic-Tips {
                        width: 360px;
                        padding-top: 6px;
                        padding-bottom: 15px;
                        border-top: 1px solid #dddddd;

                        h1 {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            line-height: 22px;
                        }
                    }
                }
            }
        }

        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            margin-top: 14px;
            margin-bottom: 30px;

            .el-button--default {
                width: 70px;
                height: 36px;
                background: rgba(255, 255, 255, 1);
                border-radius: 3px;
                border: 1px solid rgba(215, 219, 224, 1);
                padding: 0;
                color: rgba(51, 51, 51, 1);
            }

            .el-button--primary {
                width: 70px;
                height: 36px;
                background: rgba(61, 127, 255, 1);
                border-radius: 3px;
                padding: 0;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}

/**图片上传大小修改88px */

/deep/.el-upload--picture-card {
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 88px;
    height: 88px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 19px;
}

/deep/.el-icon-download {
    font-size: 19px;
}

/deep/.el-icon-delete {
    font-size: 19px;
}

.upload-box {
    width: 88px;
    height: 88px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}
</style>
